<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  <title></title>
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <style>
    /*圆形进度条*/ 
    .circle{width: 50px;height: 50px; position: relative; border-radius:25px;background:#14BF94;top:20px; right: 10px;}
    .circle .pie_left, .circle .pie_right {width: 50px; height: 50px;position: absolute;top: 0;left: 0;}
    .circle .left,.circle .right{display: block;width:50px; height:50px;background:#DBDCDC;border-radius: 50%;position: absolute;top: 0;left: 0;}
    .circle .pie_right, .circle .right {clip:rect(0,auto,auto,25px);}
    .circle .pie_left, .circle .left {clip:rect(0,25px,auto,0);}
    .circle .mask {width: 38px;height: 38px;border-radius:19px;left: 6px;top: 6px;background: #FFF;position: absolute;text-align: center;line-height: 38px;font-size: 13px; color:#4d4c4c;}
    /*End*/
   .finaList .list-group-item{border-bottom: none;border-radius: 0;border-right: none;border-left: none;}
   .finaList .list-group-item:first-child{border-radius: 0;}
   .finaList .list-group-item:last-child{border-bottom: 1px solid #ddd;border-radius: 0;}
   .line-nowrap{text-overflow: ellipsis;white-space: nowrap;overflow: hidden;}
  </style>
</head>
<body>
  <div class="jumbotron">
  	<h3>理财列表</h3>
  </div>
  <div class="container-fluid">
    <div class="list-group finaList">
      <a class="list-group-item row">
        <div class="col-xs-10 line-nowrap">
          <h4 class="list-group-item-heading">榆林路房抵 资金周转【二】</h4>
          <div class="row">
            <div class="col-xs-4">
              <span class="text-muted">年华利率</span>
              <p>14.20%</p>
            </div>
            <div class="col-xs-4">
              <span class="text-muted">期限</span>
              <p>14.20%</p>
            </div>
            <div class="col-xs-4">
              <span class="text-muted">借款金额</span>
              <p>14.20%</p>
            </div>
          </div>
        </div>
        <div class="col-xs-2">
          <div class="circle">
            <div class="pie_left"><div class="left"></div></div>
            <div class="pie_right"><div class="right"></div></div>
            <div class="mask"><span>10</span>%</div>
          </div>
        </div>
      </a>
    </div>
  </div>
<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript">
  $(function(){
    $('.circle').each(function(index, el) {
      var num = $(this).find('span').text() * 3.6;
      if (num<=180) {
          $(this).find('.right').css('transform', "rotate(" + num + "deg)");
      } else {
          $(this).find('.right').css('transform', "rotate(180deg)");
          $(this).find('.left').css('transform', "rotate(" + (num - 180) + "deg)");
      };
    });
  });
</script>
</body>
</html>
